<template>
  <div class="body" id="wekupButton">
    <div class="header">
      <div id="icon" @click="onClickLeft">
        <van-icon name="arrow-left" />
      </div>
      <div id="text">我的预约</div>
      <div></div>
    </div>
    <div class="vanswipe">
      <ul>
        <li v-for="item in shoppingData" :key="item.id">
          <img :src="item.goodsImg" class="imge" alt="" />
          <div class="content">
            <div class="text-Dev">
              {{ item.goodsName }}
            </div>
            <p class="introduce">{{ item.editors }}</p>
            <!-- <p class="surplus">剩余{{ item.surplus }}件</p> -->
            <span class="money-Dev">
              ¥<span>{{ item.salePrice }}</span>
            </span>
            <del class="price">¥{{ item.originPrice }}</del>
          </div>
          <div class="event">
            <van-button
              class="reserved button-succe"
              v-if="item.userStatus == 1"
              type="default"
              >已预约</van-button
            >
            <van-button
              class="unsuccessful button-succe"
              @click="unsuccessful"
              v-if="item.userStatus == 2"
              type="default"
              >未成功</van-button
            >
            <van-button
              class="success button-succe"
              v-if="item.userStatus == 3"
              type="default"
              @click="btnSuccess(item)"
              >成功去付款</van-button
            >
            <van-button
              class="success button-succe"
              v-if="item.userStatus == 4"
              type="default"
              >已付款</van-button
            >
            <van-button
              class="expired button-succe"
              v-if="item.userStatus == 5"
              type="default"
              >已过期</van-button
            >
            <span class="detail" @click="btnDetail(item)">查看预约详情</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 微信遮罩 -->
    <div @touchmove.prevent class="rigth" v-if="show">
      <img src="../../assets/img/wei_20210307160153.png" alt />
    </div>
    <!-- 置顶 -->
    <div class="totop" id="totop" @click="backTop" v-show="btnFlag">
      <!-- <i class="iconfont icon-zhiding"></i> -->
    </div>
  </div>
</template>
  
  <script>
import { Dialog, Toast } from "vant";
import bridge from "../../js/js1";
import { index, Coupondev } from "@/api/index";
import { share } from "../../js/wechat";
import { getSystem, openApp, getUrlQuery, parseKeyValue } from "../../js/js";
import { myMakeList } from "@/api/lottery/lottery.js";
import { shareSuccess } from "@/js/public";

export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: { [Dialog.Component.name]: Dialog.Component },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      list: [],
      lister: [],
      listdev: [],
      show: false,
      system: getSystem(),
      atr: [],
      atrdev: [],
      listerdev: [],
      share: true,
      scrollTop: 0,
      btnFlag: false,
      showTips: false,
      shoppingData: [],
      shareSuccess: true,
    };
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  mounted() {
    this.toph();
    window.addEventListener("scroll", this.scrollToTop);
    // share({
    //   title: '雷允上品牌专场',
    //   desc: '活动时间：9月16日-9月23日，雷允上品牌大促，黑芝麻丸仅售17.5元',
    //   imgUrl: 'https://download.yuanfuda933.com/h5/images/thunder.png',
    //   shareUrl: 'https://download.yuanfuda933.com/h5/other2.html#/thunder',
    // })
    this.myMakeListGet();
  },
  methods: {
    // 获取我的预约
    async myMakeListGet() {
      try {
        const res = await myMakeList();
        console.log("res+++", res);
        if (res.data.code == 200) {
          this.shoppingData = res.data.data;
        } else {
          console.log("myMakeList_接口响应错误");
        }
      } catch (err) {
        console.log("精选——接口错误", err);
      }
    },
    unsuccessful() {
      Dialog.alert({
        title: "未成功",
        className: "defeatTit",
        confirmButtonColor: "#F80464",
        confirmButtonText: "看看其他商品",
        message: "别灰心!再试试其它预约活动",
        theme: "round-button",
      }).then(() => {
        this.$router.go(-1);
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    toph() {
      if (this.system.wechat) {
        this.show = true;
        return false;
      } else {
        this.show = false;
      }
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      const that = this;
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      // console.log(that.scrollTop);
      if (that.scrollTop > 800) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    },
    // 跳转下载
    nav(item) {
      if (this.system.wechat) {
        this.show = true;
        return false;
      } else {
        this.show = false;
      }
      if (!this.system.iOS9 && !this.system.android) {
        this.href("https://itunes.apple.com/cn/app/id1542709823?mt=8");
        return false;
      }
      // console.log(item);
      // if (this.system.android) {
      //   openApp({
      //     query: { spuId: item.goods_id }
      //   })
      // }
      // if (this.system.iOS) this.href('https://itunes.apple.com/cn/app/id1542709823?mt=8')
    },
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout((t) => {
        document.body.removeChild(a);
      }, 0);
    },
    btnDetail(item) {
      this.$router.push({
        path: "/success",
        query: { id: item.activityGoodsId },
      });
    },
    href(uri, blank = true) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = uri;
      if (blank) a.setAttribute("target", "_blank");
      document.body.appendChild(a);
      a.click();
      setTimeout((t) => {
        document.body.removeChild(a);
      }, 0);
    },
    btnSuccess(item) {
      console.log("activityGoodsId+++", item);
      shareSuccess({
        spuId: item.goodsId,
        skuId: item.goodsSkuId,
        count: "1",
        addressStr: item.addressId,
        type: "1",
      });
      // let params = {
      //   spuId: item.goodsId,
      //   skuId: item.goodsSkuId,
      //   count: "1",
      //   addressStr: item.addressId,
      //   type: "1",
      // };
      // this.href = "yfd://yfdmall:8080/splash/" + `${params}`;
    },
  },
};
</script>
  
  <style scoped lang="less">
.body {
  overflow: hidden;
  // min-width: 320px;
  max-width: 10rem;
  width: 10rem;
  // height: 93.12rem;
  margin: 0 auto;
  line-height: 1.5;
  background: #f2f2f2;
  font-family: Arial, Helvetica;
  .header {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(316deg, #892385 0%, #ed2e61 100%);
    text-align: center;
    #icon {
      padding-left: 10px;
      font-size: 20px;
      color: #ffffff;
    }
    #text {
      color: #ffffff;
      font-size: 18px;
      padding-right: 10px;
    }
  }
  .moy {
    width: 3.653333rem;
    height: 0.933333rem;
    margin: 0.266667rem auto;
    border-radius: 0.2rem;
    font-weight: 600;
    font-size: 0.473333rem;
    color: #71421c;
    text-align: center;
    line-height: 0.933333rem;
    background: #eac286;
  }
  .totop {
    position: fixed;
    width: 1.2rem; /* 40/16 */
    height: 1.2rem;
    border-radius: 1.25rem /* 20/16 */;
    opacity: 0.8;
    background: url("../../assets/ding.png") no-repeat;
    background-size: contain;
    box-shadow: 0 0.02439rem 0.12195rem 0 #e0e0e0;
    right: 0.125rem; /* 18/16 */
    bottom: 3rem; /* 64/16 */
    z-index: 1100;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  // .images {
  //   height: 20px;
  // }
  .vanswipe {
    margin: 0.26667rem;
    width: 9.6rem;
    // /deep/.van-swipe-item {
    //   width: 9.6rem;
    // }
    ul li {
      position: relative;
      overflow: hidden;
      width: 9.493333rem;
      height: 3.65333rem;
      border-radius: 0.266667rem;
      background-color: #fff;
      margin-bottom: 0.266667rem;
      .imge {
        width: 2.58537rem;
        height: 2.58537rem;
        background: #dddddd;
        margin-top: 0.4rem;
        vertical-align: top;
        margin-left: 0.13333rem;
        border-radius: 0.166667rem;
      }
      .content {
        display: inline-block;
        margin-left: 0.21333rem;
        width: 4rem;
        .text-Dev {
          margin-top: 0.32rem;
          color: #000000;
          width: 100%;
          font-size: 0.426667rem;
          font-weight: 700;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .introduce {
          margin: 0;
          margin-top: 0.05333rem;
          font-size: 0.32rem;
          color: #8a8a8a;
          overflow: hidden;
          line-height: 0.4rem;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .surplus {
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          color: #000000;
          line-height: 0.21333rem;
        }
        .money-Dev {
          font-size: 0.426667rem;
          // font-weight: 600;
          color: #ff301e;
          span {
            font-size: 0.533333rem;
          }
        }
        .price {
          font-size: 0.4rem;
          margin-left: 0.16rem;
          // font-weight: 600;
          color: #9c9c9c;
        }
      }
      .event {
        display: inline-block;
        width: 2.13333rem;
        // margin-top: 0.93333rem;
        float: right;
        margin-right: 0.16rem;
        button {
          padding: 0 0.10667rem;
          width: 100%;
          border-radius: 0.39024rem;
          color: #fff;
          height: 0.8rem;
          font-size: 0.24rem;
          margin-bottom: 0.53333rem;
        }
        .button-succe {
          margin-top: 53px;
        }
        .unsuccessful {
          background: linear-gradient(180deg, #ebebeb 0%, #c3c3c3 100%);
        }
        .success {
          background: linear-gradient(180deg, #2ee079 0%, #01b581 100%);
        }
        .expired {
          background: linear-gradient(180deg, #ebebeb 0%, #c3c3c3 100%);
        }
        .reserved {
          background: linear-gradient(180deg, #ffdd6b 0%, #ffb314 100%);
        }
        .detail {
          font-size: 0.32rem;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          color: #393939;
          line-height: 0.24rem;
        }
      }
    }
  }
  .defeatTit {
    /deep/ .van-dialog__header {
      font-weight: bold !important;
    }
  }
}
</style>
  